<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:67:"F:\yxl\tp5.com\public/../application/index\view\index\phone.html";i:1558582823;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机验证登录</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<style>
    .father{width:1000px;height:auto;margin:0 auto;}
    .layui-input{width:300px;line-height:40px;}
    .login-main{margin-top:100px;margin-left:350px;width:300px;height:400px;/* border:1px solid #e6e6e6; */}
    .layui-form{margin-top:20px;}
    .layui-input-inline{margin-top:30px;}
    button{width:300px;}
</style>

<body>

<div class="father">
    <div class="login-main">
        <p style="color:#009688;font-size:25px;text-align:center;">手机验证登录</p>
        <form class="layui-form">
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="title" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="phone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline" style="width: 300px">

                    <input style="width:180px;float:left" type="text" name="captcha" class="layui-input" placeholder="请输入验证码"/>
                    <div class="mv2">
                        <input type="button" id="code" class="obtain generate_code" style="width:100px;float:right" value=" 获取验证码" onclick="codeButton(this);">
                        <a id = "sms" class="act-but submit" href="javascript:;" style="color: #ffffff;width:100px;float:right; height: 38px; background-color: #009688; text-align: center;line-height: 38px;" >发送验证码</a>
                    </div>
                </div>
            </div>
            <div class="layui-input-inline login-btn">
                <button lay-submit lay-filter="login" class="layui-btn" id="login" >登录</button>
            </div>

            <a href="http://tp5.com" style="float: right"><h2>该退了</h2></a>
        </form>
        <!--<button style="width:100px;float:right; height: 38px; background-color: #009688; color: #fff;" id="sms">获取验证码</button>-->
    </div>
</div>
<script src="/static/layui/layui.js"></script>

<script type="text/javascript">
    layui.use(['form','layer','jquery'], function () {
        // 操作对象
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;

        $("#code").on("click",function(){
            sms();
        });

        $('#sms').click(function(){
            var phone = $(" input[ name='phone' ] ").val();
            var title = $(" input[ name='title' ] ").val();
            //alert(title);
            $.ajax({
                url:"/index/index/send_sms",
                type:"POST",
                data:{'phone':phone,'title':title},
                success:function(data){
                    if(data == 200){
                        layer.msg('验证码发送成功');
                    }else if(data==500){
                        layer.msg('验证码发送失败');
                    }else if(data==300){
                        layer.msg('验证码次数超出限制');
                    }else if(data == 301){
                        layer.msg('手机号未注册');
                    }else{
                        layer.msg("手机号不能为空");
                    }

                }
            })
        });

        form.on('submit(login)',function (data) {
            // console.log(data.field);
            $.ajax({
                url:'/index/index/doSmsLogin',
                data:data.field,
                dataType:'text',
                type:'post',
                success:function (msg) {
                    if (msg == 200){
                        //console.log(data);
                        window.location = "/index/index/userList";
                    }else{
                        layer.msg('登录名或手机号错误');
                        //console.log(data);
                    }
                }
            });
            return false;
        });
        function sms(){
            var phone = $("input[name='phone']").val();
            $.ajax({
                url:"/index/index/send_sms",
                data:{"phone":phone},
                type:"post",
                dataType:"json",
                success:function(data){
                    if(data == 200){
                        layer.msg('验证码发送成功');
                    }else if(data==500){
                        layer.msg('验证码发送失败');
                    }else if(data==300){
                        layer.msg('验证码次数超出限制');
                    }else if(data == 301){
                        layer.msg('手机号未注册');
                    }else{
                        layer.msg("手机号不能为空");
                    }
                }
            })
        }
    });

    //倒计时
    var countdown = 60;
    function codeButton(val) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            val.value="获取验证码";
            countdown = 60;
            return false;
        } else {
            val.setAttribute("disabled", true);
            val.value="重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function() {
            codeButton(val);
        },1000);
    }
</script>
</body>
</html>